<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport"
    content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>basic-info</title>
  <!-- <link rel="shortcut icon" href="favicon.ico" /> -->
  <link rel="stylesheet" href="../../css/common.css">
  <link rel="stylesheet" href="../../css/basicInfo.css">
  <link rel="stylesheet" href="../../css/bootstrap/bootstrap.min.css" />
  <link rel="stylesheet" href="../../css/toastr.min.css" />
  <link rel="stylesheet" href="../../css/vant.min.css" />
</head>
<style>
  .containerfordisease {
    display: flex;
    flex-direction: column;
    height: 75vh;
  }

  .top {
    flex: 1;
  }

  .bottom {
    height: 20vh;
  }
</style>

<body>
  <!-- 版心 -->
  <div id="main">

    <!-- 内容 -->
    <div class="content">

      <!-- 头部区域 -->
      <div class="head">
        <div class="row">
          <div class="col">
            <!-- 医生姓名 -->
            <div class="doctor-info">
              <div class="image">
                <div class="text">医生</div>
                <img src="../../images/doctor_image.png" title="医生" alt="doctor_image" />
              </div>
              <div class="id">
                <div class="text" id="doctorId">{{doctorTestData.doctorId}}</div>
                <div class="name" id="doctorName">{{doctorTestData.doctorName}}</div>
              </div>
            </div>
          </div>
          <div class="col">
            <!-- 患者姓名 -->
            <div class="patient-info">
              <div class="image">
                <div class="text">患者</div>
                <img src="../../images/patient_image.png" title="患者" alt="patient_image" />
              </div>
              <div class="id">
                <div class="text" id="patientId">{{decryption(patientInfo.patientId)}}</div>
                <div class="name" id="patientName">{{decryption(patientInfo.name)}}</div>
              </div>
            </div>
          </div>
        </div>

      </div>
      <!-- 操作按钮组 -->
      <!-- <div class="row addButtonGroup">
        <div class="col"> <button type="button" @click="changePatient" id="select_patient">选择患者<svg viewBox="0 0 24 24">
              <path
                d="M20.118 3H3.893A2.914 2.914 0 0 0 1.39 7.371L9.506 20.92a2.917 2.917 0 0 0 4.987.005l8.11-13.539A2.914 2.914 0 0 0 20.117 3z" />
            </svg></button></div>
        <div class="col"><button type="button" @click="addPatient" id="add_patient">新增患者<svg viewBox="0 0 1408 1408">
              <path
                d="M1408 608v192q0 40-28 68t-68 28H896v416q0 40-28 68t-68 28H608q-40 0-68-28t-28-68V896H96q-40 0-68-28T0 800V608q0-40 28-68t68-28h416V96q0-40 28-68t68-28h192q40 0 68 28t28 68v416h416q40 0 68 28t28 68" />
            </svg></button> </div>
      </div> -->
      <div class="container">
        <div class="row justify-content-center">
          <!-- 新增按钮 -->
          <div class="col-4 col-sm-4 col-md-3 col-lg-2">
            <button @click="changePatient" class="btn btn-primary w-100">
              选择患者
            </button>
          </div>
          <!-- 详情按钮 -->
          <div class="col-4 col-sm-4 col-md-3 col-lg-2">
            <button @click="addPatient" class="btn btn-info w-100">
              新增患者
            </button>
          </div>
          <!-- 返回按钮 -->
          <div class="col-4 col-sm-4 col-md-3 col-lg-2">
            <button @click="backList" class="btn btn-secondary w-100">
              返回列表
            </button>
          </div>
        </div>
      </div>
      <!-- 是否开启编辑功能 -->
      <!-- <div class="vstack gap-2 col-md-5 mx-auto mt-2">
      <button type="button" class="btn btn-primary" v-if="isedit" @click="editHander()">编辑</button>
      <button type="button" class="btn btn-primary" v-if="!isedit" @click="subeditHander">提交</button>
      <button type="button" class="btn btn-secondary" v-if="!isedit" @click="editHander(1)">取消</button>
    </div> -->
      <!-- 基础信息 -->
      <div class="basic-info">
        <div class="basic-info-title">基础信息</div>
        <div class="">
          <div class="mb-3 row">
            <label for="admissionTime" class="col-sm-3 col-form-label">入院时间</label>
            <div class="col-sm-9">
              <!-- <input v-if="isedit" :disabled="isedit" type="text" class="form-control" name="admissionTime"
                v-model="patientInfo.admissionTime" />
              <input v-if="!isedit" type="datetime-local" step="1" class="form-control" name="admissionTime"
                v-model="patientInfo.admissionTime" /> -->
              <input type="text" step="1" class="form-control" :disabled="isedit" readonly
                @input="admissionTimeHander(patientInfo.admissionTime)" @click="showPicker('patientInfo.admissionTime')"
                placeholder="入院时间" v-model="patientInfo.admissionTime">
              <!-- 日期选择器 -->
              <van-popup v-model:show="showPickerVisible" position="bottom">
                <van-datetime-picker v-model="currentDate" type="datetime" title="选择日期" :min-date="minDate"
                  :max-date="maxDate" @confirm="onConfirm" @cancel="showPickerVisible = false"
                  :columns-order="['year','month', 'day', 'hour','minute']" :formatter="formatter" />
              </van-popup>
            </div>
          </div>
          <div class="mb-3 row">
            <label for="firstIcuAdmissionTime" class="col-sm-3 col-form-label">首次入住ICU时间</label>
            <div class="col-sm-9">
              <!-- <input v-if="isedit" :disabled="isedit" type="text" step="1" class="form-control" name="firstIcuAdmissionTime"
                v-model="patientInfo.firstIcuAdmissionTime" />
                <input v-if="!isedit" :disabled="isedit" type="datetime-local" step="1" class="form-control" name="firstIcuAdmissionTime"
                v-model="patientInfo.firstIcuAdmissionTime" /> -->
              <input type="text" step="1" class="form-control" :disabled="isedit" readonly
                @input="firstIcuAdmissionTimeHander(patientInfo.firstIcuAdmissionTime)"
                @click="showPicker('patientInfo.firstIcuAdmissionTime')" placeholder="首次入住ICU时间"
                v-model="patientInfo.firstIcuAdmissionTime">
            </div>
          </div>
          <div class="mb-3 row">
            <label for="age" class="col-sm-3 col-form-label">年龄</label>
            <div class="col-sm-9">
              <input :disabled="isedit" type="number" class="form-control" name="age" v-model="patientInfo.age" />
            </div>
          </div>
          <div class="mb-3 row">
            <label for="gender" class="col-sm-3 col-form-label">性别</label>
            <div class="col-sm-9">
              <select id="gender" class="form-control" name="gender" v-model="patientInfo.gender" :disabled="isedit">
                <option value="1">男</option>
                <option value="0">女</option>
              </select>
            </div>
          </div>
          <div class="mb-3 row">
            <label for="gender" class="col-sm-3 col-form-label">主治医生</label>
            <div class="col-sm-9">
              <select id="gender" class="form-control" name="gender" @change="doctorChange"
                v-model="patientInfo.doctorInfoId" :disabled="isedit">
                <option v-for="item in doctorList" :value="item.doctorInfoId">{{item.name}}</option>
              </select>
            </div>
          </div>
        </div>
      </div>
      <div class="bottom">
        <div class="vstack gap-2 col-md-5 mx-auto mt-2">
          <button type="button" class="btn btn-primary" v-if="isedit" @click="editHander()">编辑</button>
          <button type="button" class="btn btn-primary" v-if="!isedit" @click="subeditHander">提交</button>
          <button type="button" class="btn btn-secondary" v-if="!isedit" @click="editHander(1)">取消</button>
        </div>
      </div>
      <!-- 尾部区域 -->
      <div id="footer">
        <a href="javascript:;" class="active">基础信息</a>
        <a href="biochemical_signs.html">生化及体征</a>
        <!-- 通过 confirmColor no yellow  red -->
        <a class="AIButton" href="AI_diagnosis_treament.html">
          AI预警
          <div class="spinner-grow text-danger" v-if="patientInfo.confirmColor == 'red'" role="status">
            <span class="visually-hidden">Loading...</span>
          </div>
          <div class="spinner-grow text-warning" v-if="patientInfo.confirmColor == 'yellow'" role="status">
            <span class="visually-hidden">Loading...</span>
          </div>
        </a>
        <a href="reviewdata.html">其它信息录入</a>
      </div>
    </div>
    <!-- Modal -->
    <div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
      aria-labelledby="staticBackdropLabel" aria-hidden="true">
      <div class="modal-dialog modal-dialog-scrollable">
        <div class="modal-content">
          <div class="modal-header">
            <h1 class="modal-title fs-5" id="staticBackdropLabel">选择患者</h1>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
            <ol class="list-group list-group-numbered">
              <li @click="changePatientHander(item)" v-for="item in AllPatientList" v-show="!item.is_finished"
                class="list-group-item d-flex justify-content-between align-items-start"
                v-bind:class="{ active: item.patientInfoId == patientInfo.patientInfoId}">
                <div class="ms-2 me-auto">
                  <div class="fw-bold">{{decryption(item.patientId)}}</div>
                  {{decryption(item.name)}}<span v-if="item.isDiagnosedWithSepsis == '1' || item.isPatientDischarged == '1' || item.isPatientDie == '1'">✔</span>
                </div>
              </li>
              <!-- <li class="list-group-item d-flex justify-content-between align-items-start list-group-item-danger">
                    <div class="ms-2 me-auto">
                      <div class="fw-bold">Subheading</div>
                      Content for list item
                    </div>
                  </li>
                  <li class="list-group-item d-flex justify-content-between align-items-start list-group-item-warning">
                    <div class="ms-2 me-auto">
                      <div class="fw-bold">Subheading</div>
                      Content for list item
                    </div>
                  </li>
                   -->

            </ol>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script type="text/javascript" src="../../js/tool/vue.js"></script>
  <script type="text/javascript" src="../../js/tool/vant.min.js"></script>
  <script type="text/javascript" src="../../js/tool/jquery.js"></script>
  <script type="text/javascript" src="../../js/tool/dayjs.min.js"></script>
  <script type="text/javascript" src="../../js/tool/toastr.min.js"></script>
  <script type="text/javascript" src="../../js/common.js"></script>
  <script type="text/javascript" src="../../js/mixin.js"></script>
  <script type="text/javascript" src="../../js/basicInfo.js"></script>
  <script type="text/javascript" src="../../js/tool/bootstrap.min.js"></script>
  <script>

  </script>
</body>

</html>